@extends('agent.mainlayout')
@section('title')
    <div class="title"><span>商品管理></span></div>
    @endsection
    @section('content')
            <!-- start 商品发布第二步-->
    <form action="" method="post">
    <div class="list7">
        <h4>填写商品信息</h4>

        <div class="main_center">
            <input type="hidden" name="cid_1" value="{{$_GET['cate0']}}" id="cid_1">
            <input type="hidden" name="cid_2" value="{{$_GET['cate1']}}" id="cid_2">
            <input type="hidden" name="cid_3" value="14" id="cid_3">
            <div class="form-row">
                
                <div class="row-tips">
                     商品名称
                </div>
                <div class="row_con">
                    <input type="text" id='name' name='name' class="lang_inp">
                </div>
                 
            </div>
            <div class="form-row">

                <div class="row-tips" >
                    商品价格
                </div>
                <div class="row_con">
                    <input type="text" id='price' name='price' class="lang_inp">
                </div>

            </div>
            <div class="form-row">

                <div class="row-tips" >
                    最低数量
                </div>
                <div class="row_con">
                    <input type="text" id='low_num' name='low_num' class="sort_inp">
                </div>

            </div>
            <div class="form-row">

                <div class="row-tips">
                    商品库存
                </div>
                <div class="row_con">
                    <input type="text" id='num' name='num' class="sort_inp">
                </div>

            </div>
            {{--<div class="form-row">--}}
                {{--<div class="row-tips">--}}
                    {{--商品规格--}}
                {{--</div>--}}
                {{--<div class="row_con" id="guige">--}}
                    {{--<div class="special">--}}
                        {{--<input style="width: 120px" type="text" class="guiname" placeholder="规格名"/>--}}
                        {{--<input style="width: 120px" type="text" class="guivalue" placeholder="规格值"/>--}}
                        {{--<span class="add" onclick="addGuige(this)">添加规格</span>--}}
                        {{--<span style="color:gray"> ( 例 ：规格名：颜色 &nbsp;&nbsp;  规格值：红,橙,黄,绿,青,蓝,紫   【一个规格名可对应多个规格值，每个值用&nbsp;,&nbsp;号隔开】)</span>--}}
                    {{--</div>--}}
                {{--</div>--}}
            {{--</div>--}}
            <div class="form-row">
                <div class="row-tips">
                    上传图片
                </div>
                <div class="row_con">
                    <a href="javascript:;" class="uploadBtn">上传图片 <input type="file" id="uploadImage" accept="image/*" num="9" name="myPhoto"
                                                       onchange="upload(this,'imgs','btns','thumb')"></a>
                    <ul class="pics" id="imgs">

                    </ul>
                </div>
            </div>
            <div class="form-row" style="height: 400px">
                <div class="row-tips" style="height: 400px">
                    商品详情
                </div>
                <div class="row_con">

                <!-- 加载编辑器的容器 -->
                <script id="container" name="content" type="text/plain">
                这里写你的初始化内容
                </script>

                </div>
            </div>
            <div>
                <center></center><input type="button" class="fabu" value="发布"></center>
            </div>
        </div>    
    </div>
    </form>
    <script src="/utf8-php/ueditor.config.js"></script>
    <script src="/utf8-php/ueditor.all.min.js"></script>


    <!-- end 商品发布第二步-->
    <script>
//        $(function(){
//
//
//            alert($('*').size());
//
//
//        });

        var ue = UE.getEditor('container',{
            initialFrameWidth:700,
            initialFrameHeight:200
        });

//        function addGuige(_this){
//            _this.innerHTML = '删除规格';
//            _this.setAttribute('onclick',"delGuige(this)");
//            var  guigebox = document.getElementById('guige');
//            var  special = guigebox.getElementsByClassName('special');
//            if(special.length>2){
//                return;
//            }
//            var temp = '<div class="special"><input style="width: 120px" type="text"  class="guiname" placeholder="规格名"/> <input style="width: 120px"  type="text"  class="guivalue" placeholder="规格值"/> <span class="add" onclick="addGuige(this)"> 添加规格</span>  <span style="color:gray"> ( 例 ：规格名：颜色 &nbsp;&nbsp;  规格值：红,橙,黄,绿,青,蓝,紫   【一个规格名可对应多个规格值，每个值用&nbsp;,&nbsp;号隔开】)</span></div>';
//            guigebox.innerHTML += temp;
//        }
//
//        function delGuige(_this){
//            var  guigebox = document.getElementById('guige');
//            var  parentNode = _this.parentNode;
//
//            var  special = guigebox.getElementsByClassName('special');
//            var temp = '<div class="special"><input style="width: 120px" type="text" class="guiname" placeholder="规格名"/> <input style="width: 120px"  type="text" class="guivalue" placeholder="规格值"/> <span class="add" onclick="addGuige(this)"> 添加规格</span>  <span style="color:gray"> ( 例 ：规格名：颜色 &nbsp;&nbsp;  规格值：红,橙,黄,绿,青,蓝,紫   【一个规格名可对应多个规格值，每个值用&nbsp;,&nbsp;号隔开】)</span></div>';
//
//            //防止完全删完了
//            if(special.length>1){
//                guigebox.removeChild(parentNode);
//            }else{
//                guigebox.innerHTML = temp;
//            }
//
//        }


        function upload(obj, imgId, btnId, name) {
            var _self = obj;
            var _this = $(obj);
            var fileReader = new FileReader();
            fileReader.onload = function (e) {
                if (fileReader.readyState == FileReader.DONE) {
                    var file = _self.files[0];
                    var size = file.size;
                    var width = file.width;
                    var height = file.height;
                    var param_num = _this.attr('num');//上传图片数量
                    var param_count = _this.attr('count');//已上传图片数量
                    if (param_num == null || param_num == undefined) {
                        _this.attr('num', 1);
                    }
                    if (param_count == null || param_count == undefined) {
                        _this.attr('count', 0);
                    }
                    var num = parseInt(_this.attr('num'));
                    var count = parseInt(_this.attr('count'));
                    if (count < num) {
                        count = count + 1;
                        var upFileId = _this.attr('id');
                        var fileId = imgId + '_' + count;
                        var func = 'delImg("' + upFileId + '","' + fileId + '")';
                        $("#" + imgId).append('<li class="' + fileId + '"><img style="height: 70px;" src="' + this.result + '"/><p class="' + fileId + '" onclick=' + func + '>删除</p></li>');
                        $("#" + btnId).append('<input type="hidden" name="' + name + '[]" class="' + fileId + '"  value="' + this.result + '">');
                        _this.attr('count', count);
                    } else {
                        alert('最多上传' + num + '张');
                    }
                }
            };
            //一次加载多个文件
            var i = 0, src = _self.files;
            fileReader.readAsDataURL(src[i]);
            fileReader.onloadend = function () {
                i++;
                if (i < src.length) fileReader.readAsDataURL(src[i]);
            }
        }

        function delImg(upInputId, fileId) {
            var _this = $("#" + upInputId);
            var count = parseInt(_this.attr('count'));
            _this.attr('count', count - 1);
            $("." + fileId).remove();
        }

        /********所有ajax加载效果**********/
        $(document).ajaxStart(function(){

            //加载效果
            layer.load(2, {shade: false});

        }).ajaxStop(function(){

            //关闭加载效果
            layer.closeAll("loading");
        });
        /********所有ajax加载效果**********/

        $(".fabu").on('click',function(){
            var name = $("#name").val();
            var price = $("#price").val();
            var low_num = $("#low_num").val();
            var num = $("#num").val();
            var cate1 = $("#cid_1").val();     //3级分类
            var cate2 = $("#cid_2").val();
            var cate3 = $("#cid_3").val();
            var content = ue.getPlainTxt();    //获取ue编辑器的内容
            //console.log(content);
            if(name==''||price==''||num==""){
                alert("请填写完整内容");
                return;
            }
            // 组合规格名
//            var guigeName = document.getElementById('guige').getElementsByClassName("guiname");
//            var guigeValue = document.getElementById('guige').getElementsByClassName("guivalue");
//            var guigeN = [];
//            var guigeV = [];
//            for(var i=0;i<guigeName.length;i++){
//                guigeN['spec'+i+"_name"] =  guigeName[i].value;
//                guigeV['spec'+i+"_value"] =  guigeValue[i].value;
//            }
            var pic = [];
            var imgs = document.getElementById("imgs").getElementsByTagName('img');
            for (var i=0;i<imgs.length;i++){
                pic.push(imgs[i].src);
            }
            var url ="{{url('center/goods/add')}}";
            //console.log(guigeN['spec0_name']);
            $.ajax({
                type:"post",
                url:url,
                dataType:'json',
                data:{
                    name:name,
                    price:price,
                    low_num:low_num,
                    num:num,
                    cid_1:cate1,
                    cid_2:cate2,
                    cid_3:cate3,
//                    spec1_name:guigeN['spec0_name'],
//                    spec1_value:guigeV['spec0_value'],
//                    spec2_name:guigeN['spec1_name'],
//                    spec2_value:guigeV['spec1_value'],
//                    spec3_name:guigeN['spec2_name'],
//                    spec3_value:guigeV['spec2_value'],
                    pics:pic,
                    content:content
                },
                success:function(res){

                   if(res['status']==1){

                       layer.msg(res.msg, {icon: 6});
                       window.location.href="{{url('center/goods')}}";

                   }else{

                       layer.msg(res.msg, {icon: 5});

                   }

                }


            })
        })







    </script>
@endsection
